<template>
  <div class="frame">
    <el-card v-model="idea" :key="idea.id">
      <div class="idea-card">
        <div class="idea-title">
          {{ idea.title }}
        </div>
        <el-divider class="el-divider-horizontal"></el-divider>
        <div class="idea-meta">
          <div class="left-info">
            <span class="info-item">{{ idea.created_at }}</span>
            <div class="idea-tags">
              <el-tag
                v-for="tag in idea.tags"
                :key="tag"
                size="small"
                effect="light"
                @click="handleTagClick(tag)"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
          <div class="right-info">
            <el-icon class="icon-view">
              <View />
            </el-icon>
            <span class="info-item">浏览{{ idea.views }}</span>
            <el-divider
              class="el-divider-vertical"
              direction="vertical"
            ></el-divider>
            <el-icon class="icon-star" @click="handleStarClick">
              <StarFilled v-if="isStarTagged"/>
              <Star v-if="!isStarTagged"/>
            </el-icon>
            <span class="info-item">赞{{ idea.stars }}</span>
          </div>
        </div>
        <el-divider class="el-divider-horizontal"></el-divider>
        <el-text>
          {{ idea.content }}
        </el-text>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, onMounted } from "vue";
  import { ElMessage } from "element-plus";
  import { View, StarFilled } from "@element-plus/icons-vue";

  import { useRoute, useRouter } from "vue-router";
  import type { Idea } from "@/types/idea";
  import { apiGetIdea, apiStarInc, apiStarDec } from "@/api/idea";

  const router = useRouter();
  const route = useRoute();

  let idea: Idea = reactive({
    id: 100,
    title: "xxx",
    url: "yyy",
    tags: ["x", "y"],
    views: 100,
    stars: 100,
    created_at: "2022-1-1 10:00:00",
    content: "计算当前页面显示的博客，computed 作用",
  });

  const isStarTagged = ref(false);

  // 页面加载时获取第一页的博客
  onMounted(() => {
    idea.id = Number(route.query.id);
    async () => {
      try {
        const _idea: Idea = await apiGetIdea(idea.id);
        if (_idea.id > 0) {
          idea = _idea;
        }
      } catch (err) {
        alert(err);
      }
    }
  });

  function handleTagClick(tag: string) {
    alert("Handle Tag Click: " + tag);
  }

  function handleStarClick() {
    // isStarTagged.value = isStarTagged.vaule == true ? false : true;

    if (!isStarTagged.value) {
      isStarTagged.value = true;
      ElMessage.success("点赞");
      async () => {
        try {
          const stars = await apiStarInc(idea.id);
          if (stars > 0) {
            idea.stars = stars;
          }
        } catch (err) {
          alert(err);
        }
      }
    } else {
      isStarTagged.value = false;
      ElMessage.success("取消点赞");
      async () => {
        try {
          const stars = await apiStarDec(idea.id);
          if (stars >= 0) {
            idea.stars = stars;
          }
        } catch (err) {
          alert(err);
        }
      }
    }
  }
</script>

<style scoped>
  .frame {
    /* min-height: 100vh; */
    /* display: flex; */
    display: block;
    width: 80%;
    margin-left: 10%;
    margin-top: 0%;
  }

  @media (max-width: 1024px) {
    .frame {
      width: 100%;
      margin-left: 0;
    }
  }

  .el-card {
    margin-bottom: 2px;
    border-radius: 10%;
    background-color: #f3f1f1;

    .idea-card {
      width: 80%;
      margin-left: 10%;
    }
  }

  .idea-title {
    margin-bottom: 10px;
    font-size: 30px;
  }

  .title-url {
    font-size: 16px; /* 调整标题字体大小 */
    color: #333;
    text-decoration: none;
  }

  .idea-meta {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: #999;
  }

  .left-info {
    display: flex;
    align-items: center;
  }

  .right-info {
    display: flex;
    align-items: center;
  }

  .info-item {
    margin-left: 10px; /* 增加元素之间的间距 */
  }

  .el-text {
    font-size: 16px; /* 调整内容字体大小 */
    color: #252525;
    margin-top: 10px;
  }

  .idea-tags {
    margin: 6px 6px; /* 为标签添加间距 */
  }

  /* 水平分割线 */
  .el-divider-horizontal {
    margin: 0; /* 增加分割线的间距 */
  }

  /* 垂直分割线 */
  .el-divider-vertical {
    margin: 0 5px; /* 增加分割线的间距 */
  }

  .el-tag {
    margin-left: 5px;
  }

  .icon-view {
    margin-left: 10px;
    size: 20px;
    color: #0a0a0a;
  }

  .icon-star {
    margin-left: 10px;
    size: 20px;
    color: #ffd700;
  }
</style>
